<template>
    <fieldset>
        <legend>常用的Api</legend>
        <button @click="handleClick">点击</button>
        <input type="text" ref="ipt">
        <h1>{{$parent.msg}}</h1>
        <Child ref="child"/>
        <h2>{{c}}</h2>
    </fieldset>
</template>
<script>
    import Child from '@/components/usuallyUSE/child.vue';
    // $root 获取根实例（根组件）、
    // $parent 获取父组件实例（instance）支持链式调用
    // 实例就是，new出来一个实例，在内存中重新开辟一个空间，储存内容

    // ref
    // 1.放在dom元素上，可以获取真实dom
    // 2.放在子组件上，可以获得子组件的实例

    // 传参方式
    // 父传子：
    // 1.props
    // 2.$parent  $root

    // 子传父
    // 1.$emit
    // 2.ref

    // 兄弟组件  eventBus

    // 跨组件传参 （provide injet） eventBus
    export default {
        data(){
            return{
                c:""
            }
        },
        methods: {
            // 获取ref的内容
            handleClick(){
                console.log(this.$refs);
                this.$refs.ipt.focus()  
                this.c = this.$refs.child.msg 
            }
        },
        mounted(){
            console.log(this.$root);
            console.log(this.$parent);
        },
        components:{
            Child,
        }
    }
</script>